<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogVisible"
    width="1200px"
    @close="close"
  >
    <div>
      <el-input
        v-model.trim="blood_id"
        class="wd300 mr12"
        clearable
        placeholder="血袋号"
        @input="getOne"
      >
        <template slot="prepend">血袋号：</template>
      </el-input>
      <el-button type="primary" @click="getOne">搜索</el-button>
      <div class="h12"></div>
    </div>
    <el-empty
      v-if="!blood.id"
      description="暂无任何数据"
      style="padding-top: 200px"
    />
    <div v-else>
      <fieldset>
        <legend>血液分装</legend>
        <el-table border :data="subDatas" stripe style="width: 100%">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
          />
          <el-table-column align="center" label="血液成分" prop="product" />
          <el-table-column
            align="center"
            label="配血试管号"
            prop="tube_number"
          />
          <el-table-column align="center" label="血量">
            <template #default="{ row }">
              <el-input-number
                v-model="row.capacity"
                controls-position="right"
                placeholder="血量"
                size="mini"
                :step="0.5"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template #header>
              <el-link icon="el-icon-plus" type="primary" @click="handleAdd">
                增加
              </el-link>
            </template>
            <template #default="{ $index }">
              <el-link
                icon="el-icon-delete"
                type="danger"
                @click="handleDelete($index)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="h12"></div>
        <el-button
          v-if="subDatas.length > 0"
          class="ml12"
          icon="el-icon-document"
          type="primary"
          @click="handleSubmit"
        >
          提交
        </el-button>
      </fieldset>
      <div class="h24"></div>
      <fieldset>
        <legend>血液信息</legend>
        <blood :blood="blood" />
      </fieldset>
    </div>
  </el-dialog>
</template>

<script>
  import { sum } from '@/utils'
  import Blood from './Blood'
  import { getOne } from '@/api/blood'
  export default {
    components: {
      Blood,
    },
    data() {
      return {
        blood_id: '',
        activeName: 'first',
        dialogVisible: false,
        title: '血液分装',
        blood: {},
        subDatas: [],
      }
    },
    methods: {
      close() {
        this.blood = {}
        this.subDatas = []
        this.dialogVisible = false
        this.activeName = 'first'
      },
      show(row) {
        this.blood_id = row.id
        this.getOne()
        this.dialogVisible = true
      },
      handleAdd() {
        const { product, tube_number, capacity } = this.blood
        const capacity_extra =
          capacity - sum(this.subDatas.map((val) => val.capacity))
        this.subDatas.push({
          product: product.name,
          tube_number,
          capacity: capacity_extra,
        })
      },
      handleDelete(index) {
        this.subDatas.splice(index, 1)
      },
      handleSubmit() {
        this.$emit('submit', this.blood.id, this.subDatas)
      },
      async getOne() {
        if (this.blood_id && this.blood_id.length >= 8) {
          const { data } = await getOne(this.blood_id)
          this.blood = data
          this.addSub(data)
        } else {
          this.blood = {}
          this.subDatas = []
        }
      },
      addSub(row) {
        if (row.id) {
          const { product, tube_number, capacity } = row

          this.subDatas.push(
            {
              product: product.name || '',
              tube_number,
              capacity: capacity / 2,
            },
            {
              product: product.name || '',
              tube_number,
              capacity: capacity / 2,
            }
          )
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
